<template>
	<view class="repair-wrap">
		<view class="u-m-t-20 repair-box u-p-40 u-p-l-30 u-p-r-30">
			<view class="header-li">
				<view style="width: 98px;"><h3>领取人姓名</h3></view>
				<view class="input1"><u-input v-model="ruleFrom.receive_person_name" placeholder="请输入联系人" /></view>
			</view>
			<view class="header-li">
				<view style="width: 98px;"><h3>领取人电话</h3></view>
				<view class="input1"><u-input v-model="ruleFrom.receive_person_phone" placeholder="请输入联系电话" /></view>
			</view>
		</view>
		
		<view class="u-m-t-20 repair-box u-p-40 u-p-l-30 u-p-r-30">
			<!-- <view class="guarn-box guarn-box2 u-m-t-20" >
				<view class="guarn-box2-img"  >
					<image ></image>
					<u-icon  name="close" color="red" size="40" class="guarn-box2-img-close"></u-icon>
				</view>
			</view> -->
			<view class="guarn-box u-m-t-20">
				<view  class="guarn-box-img">
					<image class="u-m-t-72" src="../../static/image/camera.svg" mode=""></image>
					
				</view>
				<view class="guarn-box-txt">
					<view class="u-font-24 u-m-b-10">
						请上传清晰的照片,以便解决报修问题
					</view>
					<view class="u-font-24 u-m-b-10">
						最多上传3张照片
					</view>
				</view>
			</view>
			<view style="margin-top: 30px;padding-bottom: 20px;">
				<button class="yilingqu" @click="determine()">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ruleFrom:{
					id:null,
					is_receive:1,//领取标识
					receive_person_name:null,//领取人姓名
					receive_person_phone:null,//领取人电话
					receive_id_positive:null,//领取人身份证正面
					receive_id_back:null,//领取人身份证反面
					receive_time:null,//领取时间
				}
			}
		},
		onShow() {
			
		},
		methods: {
			//确定按钮
			determine(){
				this.$request.api.editLost({
					id:this.ruleFrom.id,
					is_receive:1,//领取标识
					receive_person_name:this.ruleFrom.receive_person_name,//领取人姓名
					receive_person_phone:this.ruleFrom.receive_person_phone,//领取人电话
					receive_id_positive:this.ruleFrom.receive_id_positive,//领取人身份证正面
					receive_id_back:this.ruleFrom.receive_id_back,//领取人身份证反面
					receive_time:this.ruleFrom.receive_time,//领取时间
				}).then(res =>{
					this.ruleFrom.id = null;
					// is_receive:1,//领取标识
					this.ruleFrom.receive_person_name = null;//领取人姓名
					this.ruleFrom.receive_person_phone = null;//领取人电话
					this.ruleFrom.receive_id_positive = null;//领取人身份证正面
					this.ruleFrom.receive_id_back = null;//领取人身份证反面
					this.ruleFrom.receive_time = null;
				})
				uni.showModal({
				   title: '提示',
				   content: '领取成功，待审批列表查看',
				   success: function (res) {
					   uni.navigateBack({
							url:'/pages/lostarticle/inputreceived'
					})
				   }
				});
			},
			// 选择图片
			uoloadHouse() {
					let _this = this;
					uni.showActionSheet({
						itemList: ['手机拍照', '本地图片上传'],
						success: function(res) {
							if (res.tapIndex == 0) {
								uni.chooseImage({
									count: 3, //默认9
									sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
									sourceType: ['camera '],
									
								})
							} else {
								uni.chooseImage({
									count: 1, //默认9
									sizeType: ['original', 'compressed'],
									sourceType: ['album  '],
									
								});
							}
						},
						fail: function(res) {}
					});
			},
		}
	}
</script>

<style lang="scss">
	.repair-wrap {
		width: 100%;
		// min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}
	.guar-class-box {
		width: 196rpx;
		height: 68rpx;
		border-radius: 34rpx;
		text-align: center;
		line-height: 68rpx;
		border: 2rpx solid #ccc;
	
		&:nth-child(3n) {
			margin-right: 0 !important;
		} 
	}
	.guar-class-box-active{
		border-color: #FEEED6;
		background: #FEEED6;
		color: #F9A832;
	}
	
	.guar-back-f {
		width: 100%;
		height: 20rpx;
		background: #f4f4f4;
	}
	.guar-text textarea {
		width: 345px;
		height: 120px;
		background: #F2F3F5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
	}
	.guarn-box{
		width: 100%;
		height: 216rpx;
	}
	.guarn-box2{
		display: flex;
	}
	.guarn-box2-img{
		width:216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;
		.guarn-box2-img-close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}
	.guarn-box2 image{
		width:216rpx;
		height: 216rpx;
	}
	
	.guarn-box-img{
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
	}
	.guarn-box-img image{
		width: 76rpx;
		height: 68rpx;
	}
	.guarn-box-txt{
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}
	.guar-txt-time{
		float: right;
		text-align: right;
		width: 420rpx;
	}
	.custom-style {
		color: #F9AF3A;
	}
	.header-li{
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom:1rpx solid #EEEEEE;
	}
	.header-name{
		width: 186rpx;
	}
	.form-select{
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}
	.input1 {
		width: 400rpx;
		text-align: left;
		margin-top: 8px;
		line-height: 200%;
	}
	.yilingqu{
		width: 80%;
		height: 84rpx;
		background:#F9A832;
		background-color: #F9A832;
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}
</style>
